<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model 列表框 select类型</title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id ="app">
        <!--
            列表框单选时，v-model绑定的时选项值，多选时，v-model绑定的是一个数组
            选择一个，v-model绑定的是选项的值
        -->
       <select name="id" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="梨子">梨子</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
       </select>

       <p>你选择的时{{fruit}}</p>
        <!--
            选择多个，v-model绑定一个数组
            选择框如何多个选择？可以按住ctrl键
        -->
        <select name="id" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="梨子">梨子</option>
            <option value="香蕉">香蕉</option>
            <option value="西瓜">西瓜</option>
           </select>
           
           <p>你选择的时{{fruits}}</p>
    </div>
    
    <script>
       let app =new Vue({
         el:"#app",
         data:{
           msg:'hello world',
           fruit:'西瓜',
           fruits:[]
         }
       })
    </script>  
</body>
</html>